<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/6/1
  Time: 8:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/css.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/vendor/bootstrap/css/bootstrap.min.css">
</head>
<style>
    .navigateBar1{
        list-style: none;
    }
    .navigateBar1 li{
        float: left;
        width: 50px;
    }
</style>
<body>
<h1 class="text-center">博客</h1>
<table class="msgBox table-hover table table-bordered" border="1px solid"width="100%" style="margin-top: 20px;line-height: 30px;text-align: center;">
    <thead>
    <tr>
        <td>id</td>
        <td>标题</td>
        <td>img</td>
        <td>内容</td>
        <td>表情</td>
        <td>时间</td>
        <td>类型</td>
        <td>所属用户</td>
        <td colspan="2">操作</td>
    </tr>
    </thead>
    <tbody class="hm"></tbody>
</table>
每页显示<select name="pageSize" id="pageSize">
    <option value="3">3</option>
    <option value="5">5</option>
    <option value="8">8</option>
</select>条
<ul class="navigateBar" style="list-style: none;margin: -18px 300px;"></ul>

</body>
<script src="${pageContext.request.contextPath}/vendor/jquery/jquery.min.js"></script>
<script>
    $(function(){
        getInvitation();
        $(".userForm").change(function(){
            getInvitation();
        })
        $("#pageSize").change(function(){
            getInvitation();
        })
    })

    function getInvitation(pageNum){
        $(".hm").empty();
        var url = "${pageContext.request.contextPath}/getInvitation";
        var iid = $("#iid").val();
        var iname = $("#iname").val();
        var iimg = $("#iimg").val();
        var content = $("#content").val();
        var imjob = $("#imjob").val();
        var retime = $("#retime").val();
        var itype = $("#itype").val();
        var userid = $("#userid").val();
        var pageSize = $("#pageSize").val();
        var data = {"iid":iid,"iname":iname,"iimg":iimg,"content":content,"imjob":imjob,"retime":retime,"itype":itype,"userid":userid,"pageSize":pageSize,"pageNum":pageNum}
        $.ajax({
            url:url,
            method:"post",
            data:data,
            success:function(data){
                var invitation = data.list;
                for(var i=0;i<invitation.length;i++){
                    var $tr = $("<tr>");
                    $(".hm").append($tr);
                    var $iid = $("<td>");
                    var $iname = $("<td>");
                    var $iimg = $("<td>");
                    var $img=$("<img src='"+invitation[i].iimg+"' width='30px' height='30px'>");
                    $iimg.append($img);
                    var $content = $("<td>");
                    var $imjob = $("<td>");
                    var $retime = $("<td>");
                    var $itype = $("<td>");
                    var $userid = $("<td>");
                    var $option = $("<td>");
                    var $btn = $("<button>删除</button>");
                    $btn.attr("onclick",'deleteInvitation('+invitation[i].iid+')');
                    $option.append($btn);
                    $iid.html(invitation[i].iid);
                    $iname.html(invitation[i].iname);
                    $content.html(invitation[i].content);
                    $imjob.html(invitation[i].imjob);
                    $retime.html(invitation[i].retime);
                    $itype.html(invitation[i].itype);
                    $userid.html(invitation[i].userid);
                    $tr.append($iid).append($iname).append($iimg).append($content).append($imjob).append($retime).append($itype).append($userid).append($option);
                }
                makePageBar(data);
            }
        })
    }

    function deleteInvitation(iId) {
        var url = "${pageContext.request.contextPath}/invitation/"+iId;
        $.ajax({
            url:url,
            method: "DELETE",
            data:{"iId":iId},
            success:function(data){
                if(data==1){
                    getInvitation();
                }
            }
        })
    }

    function makePageBar(data){
        $(".navigateBar").empty();
        var isFirstPage = data.isFirstPage;
        var isLastPage = data.isLastPage;
        var hasNextPage = data.hasNextPage;
        var hasPreviousPage = data.hasPreviousPage;
        var navigatePageNums = data.navigatepageNums;
        var currentPageNum = parseInt(data.pageNum);
        if(isFirstPage!=true){
            $li = $("<li></li>");
            $a = $('<a href="#">首页</a>');
            $li.append($a);
            $a.attr("onclick","getImages("+1+")").text("首页");
            $(".navigateBar").append($li);
        }
        if(hasPreviousPage == true){
            var previousPageNum = currentPageNum-1;
            $li = $("<li></li>");
            $a = $('<a href="#"></a>');
            $li.append($a);
            $a.attr("onclick","getImages("+previousPageNum+")").text("上一页");
            $(".navigateBar").append($li);
        }
        for(var i=0 ;i< navigatePageNums.length; i++){
            var pageNum = navigatePageNums[i];
            $li = $("<li></li>");
            $a = $('<a href="#"></a>');
            $li.append($a);
            $a.attr("onclick","getImages("+pageNum+")").text(pageNum);
            $(".navigateBar").append($li);
        }
        if(hasNextPage == true){
            var nextPagenum = currentPageNum+1;
            $li = $("<li></li>");
            $a = $('<a href="#"></a>');
            $li.append($a);
            $a.attr("onclick","getImages("+nextPagenum+")").text("下一页");
            $(".navigateBar").append($li);
        }
        if(isLastPage!=true){
            var lastPagenum = data.pages;
            $li = $("<li></li>");
            $a = $('<a href="#">首页</a>');
            $li.append($a);
            $a.attr("onclick","getImages("+lastPagenum+")").text("尾页");
            $(".navigateBar").append($li);
        }
    }
</script>

</html>
